<template>
  <transition name="move">
    <div class="food" v-show="foodFlag" ref="food">
      <div class="food-content">
        <div class="img-header">
          <img :src="food.image">
          <div class="back" @click="hide">
            <span class="iconfont img-back">&#xe624;</span>
          </div>
        </div>
        <div class="content">
          <h1 class="title">{{food.name}}</h1>
          <div class="detail">
            <span class="sell-count">月售{{food.sellCount}}份</span>
            <span>好评率{{food.rating}}%</span>
          </div>
          <div class="price">
            <span class="new">￥{{food.price}}</span>
            <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
          </div>
          <div class="cartcontrol-wrapper">
            <cart-control :food="food"></cart-control>
          </div>
          <transition>
            <div class="buy"
                 v-show="!food.count || food.count === 0"
                 @click.stop.prevent="addFirst"
            >加入购物车</div>
          </transition>
        </div>
        <split v-show="food.info"></split>
        <div class="info" v-show="food.info">
          <h1 class="title">商品介绍</h1>
          <p class="info-detail">{{food.info}}</p>
        </div>
        <split></split>
        <div class="rating">
          <h1 class="title">商品评价</h1>
          <rating-select
            :select-type="selectType"
            :only-content="onlyContent"
            :desc="desc"
            :ratings="food.ratings"
            @typeChnage="changeType(type)"
            @contentChnage="changeContent(onlyContent)"
          >
          </rating-select>
          <div class="rating-wrapper">
            <ul v-show="food.ratings && food.ratings.length">
              <li v-for="rating of food.ratings"
                  class="rating-item"
                  v-show="needShow(rating.rateType,rating.text)"
              >
                <div class="user">
                  <span class="name">{{rating.username}}</span>
                  <img class="avatar" :src="rating.avatar" width="12" height="12">
                </div>
                <div class="time">{{rating.rateTime | formatDate}}</div>
                <p class="text">
                  <span class="iconfont xia" v-show="rating.rateType===1">&#xe676;</span>
                  <span class="iconfont zan" v-show="rating.rateType===0">&#xe60c;</span>
                  {{rating.text}}
                </p>
              </li>
            </ul>
            <div class="no-rating" v-show="!food.ratings || !food.ratings.length">
              <span>暂无评价......</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import Bscroll from 'better-scroll'
import Vue from 'vue'
import {formatDate} from '../../common/js/date'
import CartControl from '../cartcontrol/CartControl'
import Split from '../split/Split'
import RatingSelect from '../ratingselect/RatingSelect'
const POSITIVE = 0
const NEGATIVE = 1
const ALL = 2
export default {
  name: 'Food',
  props: {
    food: Object
    // ratings: Array
  },
  data () {
    return {
      foodFlag: false,
      selectType: ALL,
      onlyContent: false,
      desc: {
        all: '全部',
        positive: '推荐',
        negative: '吐槽'
      }
    }
  },
  filters: {
    formatDate (time) {
      let date = new Date(time)
      return formatDate (date, 'yyyy-MM-dd hh:mm')
    }
  },
  components: {
    CartControl,
    Split,
    RatingSelect
  },
  methods: {
    show () {
      this.foodFlag = true
      this.selectType = ALL
      this.onlyContent = true
      this.scroll = new Bscroll(this.$refs.food, {
        click: true
      })
    },
    hide () {
      this.foodFlag = false
    },
    addFirst () {
      Vue.set(this.food, 'count', 1)
    },
    needShow (type, text) {
      if (this.onlyContent && !text) {
        return false
      }
      if (this.selectType === ALL) {
        return true
      } else {
        return type === this.selectType
      }
    },
    changeType (type) {
      this.selectType = type
    },
    changeContent (onlyContent) {
      this.onlyContent = onlyContent
    }
  }
}
</script>

<style lang="stylus" scoped>
  .food
    position fixed
    top 0
    left 0
    bottom 48px
    width 100%
    z-index 30
    background #fff
    &.move-enter-active,&.move-leave-active
      transition all 0.2s linear
      transform translate3d(0,0,0)
    &.move-enter,&.move-leave-to
      transform translate3d(100%,0,0)
    .img-header
      position relative
      top 0
      left 0
      width 100%
      height 0
      padding-bottom 100%
      img
        position absolute
        width 100%
        height 100%
      .back
        position absolute
        top 10px
        left 0
        padding 10px
        .img-back
          width 12px
          height 12px
          color #fff
          font-weight 700
  .content
    padding 18px
    position relative
    .title
      font-size 14px
      line-height 14px
      font-weight 700
      color rgb(7,17,27)
    .detail
      height 10px
      padding 8px 0 18px 0
      font-size 10px
      line-height 10px
      color rgb(147,153,159)
      .sell-count
        margin-right 12px
    .price
      line-height 24px
      font-weight 700
      /*padding-bottom 18px*/
      .new
        font-size 14px
        margin-right 8px
        color red
      .old
        text-decoration line-through
        font-size 10px
        color rgb(147,153,159)
    .cartcontrol-wrapper
      position absolute
      right 12px
      bottom 12px
    .buy
      position absolute
      right 18px
      bottom 18px
      z-index 10
      height 24px
      line-height 24px
      padding 0 12px
      box-sizing border-box
      border-radius 12px
      background rgb(0,160,220)
      font-size 10px
      color #fff
      &.v-enter,v-leave-to
        opacity: 0
      &.v-enter-active, .v-leave-active
        transition:opacity .5s
  .info
    padding 18px
    .title
      font-size 14px
      line-height 14px
      color rgb(7,17,27)
      margin-bottom 6px
    .info-detail
      font-size 12px
      line-height 24px
      color rgb(77,85,93)
      padding 0 8px
  .rating
    padding-top 18px
    .title
      margin-left 18px
      font-size 14px
      line-height 14px
      color rgb(7,17,27)
    .rating-wrapper
      padding 0 18px
      .rating-item
        position relative
        padding 16px 0
        border-bottom 1px solid rgba(7,17,27,0.1)
        .user
          position absolute
          right 0
          top 16px
          line-height 12px
          .name
            display inline-block
            vertical-align top
            font-size 10px
            line-height 12px
            color rgb(147,153,159)
            margin-right 6px
          .avatar
            border-radius 50%
        .time
          /*position absolute*/
          font-size 10px
          line-height 12px
          color rgb(147,153,159)
          margin-bottom 6px
        .text
          font-size 12px
          line-height 16px
          color rgb(7,17,27)
          .xia
            margin-right 4px
            color rgb(147,153,159)
          .zan
            margin-right 4px
            color rgb(0,160,220)

      .no-rating
        position relative
        padding 16px 0
        font-size 12px
        line-height 16px
        color rgb(7,17,27)
</style>
